<template>
	<view>
		<view  v-for="(order,orderIndex) in orderList" :key="orderIndex"
			@click="toOrderDetail(order)"
			style="background-color: #ffffff;border-radius: 16rpx;padding: 20rpx;margin-bottom: 20rpx;">
			<!-- 基本信息 -->
			<view class="u-flex u-row-between u-col-center">
				<view class="u-flex u-row-left u-col-center">
					<view class="u-m-r-20">
						 <u-tag v-if="order.deliveryWay==0" mode="dark"  text="自取" type="success" shape="circle" />
						 <u-tag v-if="order.deliveryWay==1" mode="dark"  text="外卖" type="primary" shape="circle" />
					</view>
					<view>
						甜诺烘焙
					</view>
				</view>
				<view class="u-p-t-4">
					<text v-if="order.payStatus==0" style="font-weight: bold; color: #333333;font-size: 30rpx;margin-right: 6rpx;">待支付</text>
					<text v-if="order.payStatus==1" style="font-weight: bold; color: #333333;font-size: 30rpx;margin-right: 6rpx;">待出货</text>
					<text v-if="order.payStatus==2" style="font-weight: bold; color: #333333;font-size: 30rpx;margin-right: 6rpx;">已完成</text>
					<text v-if="order.payStatus==3" style="font-weight: bold; color: #333333;font-size: 30rpx;margin-right: 6rpx;">已取消</text>
					<template v-if="order.payStatus==0&&order.payCountDown>0">
						(<u-count-down @end="payCountDownEnd(order)" :show-hours="false" color="#FF4B64"  :timestamp="order.payCountDown"></u-count-down>)
					</template>
					<u-icon name="arrow-right" color="#909399" size="28"></u-icon>
				</view>
			</view>
			<!-- 分割线 -->
			<view style="margin: 30rpx 0rpx 12rpx 0rpx;">
				<u-line color="#909399" length="100%" border-style="dotted"/>
			</view>
			<!-- 商品 -->
			<view>
				<view  v-for="(good,goodIndex) in order.goodList" :key="goodIndex"
						class="u-flex u-row-between u-col-center u-border-bottom u-p-t-15 u-p-b-15">
					<!-- 商品图片 -->
					<view class="u-flex u-row-center u-col-center">
						<view>
							<!-- prefixUrl -->
							<u-image :src="good.url"
							border-radius="6rpx"
							width="130rpx" height="130rpx">
							<view slot="loading"
								  class="u-flex u-row-center u-col-center"
								  style="width: 120rpx;height: 120rpx;background-color:#ffffff;">
								<view>
									<u-loading></u-loading>
								</view>
							</view>
							</u-image>
						</view>
					</view>
					<view  style="text-align: right;display: flex;flex-direction: column;justify-content: space-between;align-items: flex-end;height: 140rpx;">
						<view class="u-line-1">{{good.goodName}}</view>
						<view  style="width: 100%;">
							<text>{{'¥'+good.price+''}}</text>
						</view>
						<view style="color: #909399;;">
							<text style="margin-right: 4rpx;">×</text>
							<text>{{good.count}}件</text>
						</view>
					</view>
				</view>
			</view>
			<view class="u-flex u-row-between u-col-center u-m-t-20">
				<view style="font-size: 26rpx;color: #909399;">
					<text style="margin-right: 6rpx;">下单时间:</text>
					<text>{{order.createTime}}</text>
				</view>
				<view style="font-size: 30rpx;color: #333333;">
					<text style="margin-right: 4rpx;">实付:</text>
					<text style="font-weight: bold;">¥{{order.payAmount+''}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const multipartUrl="http://175.24.203.136:8081/tj-chat/fileServer/getFileFromParam?filePath=tiannuo/images/";
	import empty from '@/components/empty/empty.vue';
	export default {
		name:"order-list",
		components:{
			empty
		},
		props:{
			orderList:{
				type:Array,
				default:[]
			},
		},
		data() {
			return {
				prefixUrl:multipartUrl
			};
		},
		methods:{
			payCountDownEnd:function(order){
				this.$emit("payCountDownEnd",order);
			},
			toOrderDetail:function(order){
				this.$emit("toOrderDetail",order);
			}
		}
	}
</script>

<style lang="scss">

</style>